<template>
  <el-tooltip
    effect="dark"
    :content="tooltipContent"
    :placement="placement"
    :disabled="tooltipDisabled"
  >
    <div class="icon">
      <img class="icon" :class="{'disabled': disable}" :src="imgSrc"
           :style="{ width: iconSize, height: iconSize }">

    </div>
  </el-tooltip>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'

interface SvgIconProps {
  tooltipContent?: string,
  tooltipDisabled?: boolean,
  imgSrc?: string,
  iconSize?: string,
  placement?: string
  disable?: boolean
}


// 使用defineProps来定义和接收props
const props = withDefaults(defineProps<SvgIconProps>(), {
    // 设置默认值
    tooltipContent: '',   // 提供默认的 tooltip
    tooltipDisabled: false,
    imgSrc: '',   // 提供默认的图片路径
    iconSize: '0px',   // 提供默认的图标大小
    placement: 'top',
    disable: false
  }
)


</script>

<style scoped lang="less">
.icon {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
</style>
